<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 100px;
            width: 100px;
            height: 100px;
            background-color: #f66;
        }
        .wp {
            margin: 100px;
            /* overflow: hidden; */
        }
        .first {
            height: 100px;
            margin-bottom: 100px;
            background-color: orangered;
        }
        .second {
            height: 100px;
            width: 100px;
            margin-top: 120px;
            background-color: yellowgreen;
           display: inline-block;
        }
    </style>
</head>
<body>
    <!-- 
        同一个BFC的盒子才会发生边距塌陷，所以不想让他们垂直边距塌陷的话，
        让两个box处于不同的BFC即可
        第一个top处于根元素的BFC
        第二个top处于wp的BFC
     -->
     <div class="top"></div>
     <div class="wp">
        <div class="top"></div>
     </div>
     <div class="first"></div>
     <div class="second"></div>
</body>
</html>